<template>
	<view class="mainbgc" v-if="pageshow">
		<!-- 轮播图 -->
		<view class="u-demo-block">
			<u-swiper :list="banner" @change="e => currentNum = e.current" indicatorStyle="right: 20px" height="375"
				imgMode="aspectFit " round="0" indicator indicatorMode="line" circular v-if="type==0"
				@click="previewimg(currentNum,banner)">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text"
						style="color: #fff;">{{ currentNum + 1 }}/{{ banner.length }}</text>
				</view>
			</u-swiper>
			<u-swiper :list="dataAll.video_url_text" keyName="url" :autoplay="false" height="375" v-if="type==1">
			</u-swiper>
			<view class="centertop flexbetween" @click="changetype" v-if="dataAll.video_url_text.length!=0">
				<view :class="type==0?'HCA':'viddeo'">企业图片</view>
				<view :class="type==1?'HCA':'viddeo'">企业视频</view>
			</view>
		</view>
		<view class="mainpadding_top">
			<view class="mainpadding ffffff radius">
				<view class="flexleft">
					<view class="margin_right qianshu">￥{{dataAll.goodsprice.price}}
					</view>
					<view class="huisetextjx zhx">￥{{dataAll.goodsprice.market_price}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="huisetext">销量{{dataAll.sales}}</view>
					<view class="huisetext">浏览：{{dataAll.views}}</view>
				</view>
				<view class="flexbetween">
					<view class="notitletext margin_top" style="flex: 7;">{{dataAll.title}}</view>
					<!-- <view class="flexright" style="flex: 1;">
						<view class="collect_star flexcolumn" v-show="dataAll.is_collect" @click="collect()"></view>
						<view class="star flexcolumn " v-show="!dataAll.is_collect" @click="collect()"></view>
					</view> -->
				</view>
			</view>
			<!-- <view class="flexbetween section" @click="goIndex(dataAll.user.shop_apply.id)" v-if="dataAll.user">
				<view class="flexleft">
					<view class="image_ya margin_right">
						<image :src="dataAll.user.avatar_text" mode=""></image>
					</view>
					<view class="word_hei hui">{{dataAll.user.shop_apply.shop_name}}</view>
				</view>
				<view class="right_icon"></view>
			</view> -->
			<view class="mainpadding_top ffffff radius">
				<view class="flexcenter">
					<u-tabs :list="list1" @click="changetab"></u-tabs>
				</view>
				<view class="" v-show="current == 0">
					<view class="flexcenter" v-for="(item,index) in dataAll.xq_images_text" :key="item">
						<image :src="item" style="margin-top: 10rpx; width: 100%;" mode=""
							@click="previewimg(index,dataAll.xq_images_text)"></image>
					</view>
				</view>
				<view class="" v-show="current==1">
					<view class="flexbetween xiahuax margin_top">
						<view class="nostrongtext">分类</view>
						<view class="nostrongtext">{{dataAll.category_text}}</view>
					</view>
					<view class="flexbetween xiahuax margin_top" v-if="dataAll.cd">
						<view class="nostrongtext">产地</view>
						<view class="nostrongtext">{{dataAll.cd || ""}}</view>
					</view>
					<view class="flexbetween xiahuax margin_top" v-for="(item,index) in dataAll.sku" :key="item.id">
						<view class="nostrongtext">规格{{index+1}}</view>
						<!-- <view class="nostrongtext">{{dataAll.specs=='single'?"单规格":"多规格"}}</view> -->
						<view class="nostrongtext">{{item.difference}}</view>
					</view>
					<view class="flexbetween xiahuax margin_top" v-if="dataAll.zsl">
						<view class="nostrongtext">重量</view>
						<view class="nostrongtext">{{dataAll.zsl || ""}}</view>
					</view>
					<view class="flexbetween xiahuax margin_top" v-if="dataAll.cz">
						<view class="nostrongtext">材质</view>
						<view class="nostrongtext">{{dataAll.cz || ""}}</view>
					</view>
					<view class="flexbetween xiahuax margin_top" v-if="dataAll.jg">
						<view class="nostrongtext">结构</view>
						<view class="nostrongtext">{{dataAll.jg || ""}}</view>
					</view>
					<view class="flexbetween xiahuax margin_top" v-if="dataAll.cweigh">
						<view class="nostrongtext">承重</view>
						<view class="nostrongtext">{{dataAll.cweigh || ""}}</view>
					</view>
					<view class="flexbetween xiahuax margin_top" v-if="dataAll.cs">
						<view class="nostrongtext">成色</view>
						<view class="nostrongtext">{{dataAll.cs || ""}}</view>
					</view>
					<view class="flexbetween xiahuax margin_top" v-if="dataAll.min_qsl">
						<view class="nostrongtext">最少起售量</view>
						<view class="nostrongtext">{{dataAll.min_qsl || ""}}</view>
					</view>
					<view class="flexbetween xiahuax margin_top" v-if="dataAll.chd">
						<view class="nostrongtext">存货地</view>
						<view class="nostrongtext">{{dataAll.chd || ""}}</view>
					</view>
					<view class="flexbetween xiahuax margin_top" v-if="dataAll.flfs">
						<view class="nostrongtext">物流方式</view>
						<view class="nostrongtext">{{dataAll.flfs || ""}}</view>
					</view>
					<template v-if="dataAll.other_sx">
						<view class="flexbetween xiahuax margin_top" v-for="item in dataAll.other_sx" :key="item">
							<view class="nostrongtext">{{item.title || ""}}</view>
							<view class="nostrongtext">{{item.des || ""}}</view>
						</view>
					</template>

				</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween">
				<view class="titletext">发货地址</view>
				<view class="huisetext">{{dataAll.cityinfo || ""}}</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween">
				<view class="titletext">公司名称</view>
				<view class="huisetext">{{dataAll.user.shop_name|| ""}}</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween">
				<view class="titletext">联系人</view>
				<view class="huisetext">{{dataAll.lxname?dataAll.lxname[0]+"**":""}}</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween" @click="phones(dataAll.mobile)">
				<view class="titletext">联系电话</view>
				<view class="huisetext">{{dataAll.mobile || ""}}</view>
			</view>
			<view class="mainpadding_top">
				<view class="ershil" style="color: #FD463E;">若交易需要平台协助，请联系我们</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween">
				<view class="titletext">平台联系人</view>
				<view class="huisetext">{{dataAll.category[0].lxname || ""}}</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween" @click="phones(dataAll.category[0].mobile)">
				<view class="titletext">平台电话</view>
				<view class="huisetext">{{dataAll.category[0].mobile || ""}}</view>
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="titletext">其他说明</view>
				<view class="huisetext margin_top">{{dataAll.qtsm==null?'无':dataAll.qtsm}}</view>
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="titletext">下单须知</view>
				<view class="huisetext margin_top">{{xdinfo}}</view>
			</view>

			<view class="paddingbottom">
				<view class="mainpadding_top ffffff radius" v-if="dataAll.comment.user.nickname">
					<view class="flexbetween" @click="lookallpl(listid)">
						<view class="titletext">商品评价</view>
						<view class="lookall flexleft">查看全部<u-icon name="arrow-right" color="#228DFF" size="13">
							</u-icon>
						</view>
					</view>
					<view class="xiahuax margin_top">
						<view class="flexbetween">
							<view class="flexleft">
								<view class="pjslt margin_right2">
									<image :src="dataAll.comment.user.avatar_text" mode=""></image>
								</view>
								<view class="">
									<view class="bigbtext">{{dataAll.comment.user.nickname}}</view>
								</view>
							</view>
							<view class="ershui">{{dataAll.comment.createtime_text}}</view>
						</view>
						<view class="margin_top" style="margin-left: 93rpx;">
							<view class="ershui">{{dataAll.comment.content}}</view>
							<view class="flexleft margin_top">
								<view class="mjplt margin_right1" v-for="(item,index) in dataAll.comment.images_text"
									:key="item">
									<image :src="item" mode="" @click="previewimg(index,dataAll.comment.images_text)">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="footer mainpadding">
			<view class="flexbetween">
				<view class="flexleft">
					<!-- <view class="flexcolumn margin_right2" @click="jumpqy" v-if="dataAll.shop_id">
						<u-icon name="home" size="28"></u-icon>
						<view class="huisetextjx margin_top2">企业</view>
					</view> -->
					<!-- <view class="flexcolumn margin_right2" @click="show_wu=true">
						<u-icon name="kefu-ermai" size="28"></u-icon>
						<view class="huisetextjx margin_top2">客服</view>
					</view> -->
					<!-- 已收藏 -->
					<view class="flexcolumn margin_right3" v-show="dataAll.is_collect" @click="collect">
						<u-icon name="star-fill" size="28" color="#ff9900"></u-icon>
						<view class="huisetextjx margin_top2">收藏</view>
					</view>
					<!-- 未收藏 -->
					<view class="flexcolumn margin_right3" v-show="!dataAll.is_collect" @click="collect">
						<u-icon name="star" size="28"></u-icon>
						<view class="huisetextjx margin_top2">收藏</view>
					</view>
					<view class="flexcolumn margin_right3" @click="shopping_cart">
						<u-icon name="shopping-cart" size="28"></u-icon>
						<view class="huisetextjx margin_top2">购物车</view>
					</view>
					<view class="">
						<button open-type="share" class="footer_stars" style="padding: 0;height: 94rpx;line-height: 26rpx;">
							<view class="share" style="width: 33rpx;height: 33rpx;margin-top: 4rpx;"></view>
							<view class=" huisetextjx" style="margin-top: 24rpx;">分享</view>
						</button>
					</view>
				</view>
				<view class="flexright">
					<view class="addcar" @click="buytype(0)">加入购物车</view>
					<view class="buy" @click="buytype(1)">立即购买</view>
				</view>
			</view>
		</view>
		<!-- 规格弹框 -->
		<u-popup :show="ggshow" mode="bottom" :round="10" @close="closed">
			<view class="mainpadding">
				<view class="flexleft">
					<view class="guigslt margin_right2">
						<image :src="dataAll.image_text" mode=""></image>
					</view>
					<view class="">
						<view class="flexleft">
							<view class="dahtext margin_right" v-if="price!=''">¥{{price}}</view>
							<view class="huisetextjx zhx" v-if="market_price!=''">￥{{market_price}}</view>
						</view>
						<view class="margin_top nostrongtext" v-if="stock!=''">库存：{{stock}}</view>
					</view>
				</view>
				<view class="padding_top">
					<template v-if="dataAll.spu.length">
						<view class="" v-for="item in dataAll.spu" :key="item.id">
							<view class="titletext margin_top">{{item.name}}</view>
							<view class="flexleft flex_wrap">
								<view
									:class="item.selecttext==ite?'margin_top margin_right2 huangg':'margin_top margin_right2 huigg'"
									v-for="(ite) in item.item" :key="ite" @click="checkgg(item,ite)">{{ite}}</view>
							</view>
						</view>
					</template>
					<view class="flexbetween margin_top">
						<view class="titletext ">购买数量</view>
						<view class="jiajian">
							<view class="jianhao" @click="reducenum">
								<view class="line"></view>
							</view>
							<view style="margin-left: 30rpx;">
								<input type="number" class="xhtext" v-model="buynumber">
							</view>
							<!-- <view class="xhtext">{{buynumber}}</view> -->
							<view class="jiahao" @click="addnum"></view>
						</view>
					</view>
				</view>
				<view class="margin_top bottombtn" @click="ggclose">{{buy_type==0?"加入购物车":"立即购买"}}</view>
			</view>
		</u-popup>
		<!-- 联系我们-->
		<u-popup :show="show_wu" mode="center" @close="show_wu=false" :round="15">
			<view class="logistics margin_top border">
				<text class="logistics_danhao margin_top">请选择您要联系的方式</text>
				<view class="logistics_zi">我们根据您的选择为您服务</view>
				<view class="flexbetween relation ffffff border">
					<button open-type="contact" class="flexstart" style="margin: 0; padding: 0;">
						<image src="@/static/images/my/wiexin.png" mode="" class="wiexin"></image>
						<view class=" ">
							<view class="wiexin_kefu">微信客服</view>
							<view class="wiexin_fuwu">竭诚为您服务~！</view>
						</view>
					</button>
					<view class="right_icon"></view>
				</view>
				<view class="flexbetween relation ffffff border" @click="phone()">
					<view class="flexstart ">
						<image src="@/static/images/my/phone.png" mode="" class="wiexin"></image>
						<view class="">
							<view class="wiexin_kefu">电话客服</view>
							<view class="wiexin_fuwu">{{dataAll.mobile?dataAll.mobile:dataAll.category.mobile || ""}}
							</view>
						</view>
					</view>
					<view class="right_icon"></view>
				</view>
				<view class="look_details" @click="show_wu=false">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				type: 0,
				show_wu: false,
				pageshow: false,
				ggshow: false, //规格
				list1: [{
					name: '商品详情',
				}, {
					name: '规格参数',
				}],
				current: 0,
				currentNum: 0, //轮播图当前位置
				buynumber: 1, //购买数量
				buy_type: 0, //0购物车，1立即购买
				listid: "",
				dataAll: {},
				xdinfo: "",
				mobile: "",
				price: "", //规格弹框价格
				market_price: "", //规格弹框划线价格
				stock: "", //库存
				sku_id: "",
				guigeflag: false, //是否选择规格
				banner: [],
				// video_url_text: []
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getdetail()
			this.getset()
		},
		watch: {
			'dataAll.spu': {
				handler(newval) {
					let arr = []
					newval.forEach(item => {
						arr.push(item.selecttext)
					})
					// 规格换算价格
					let text = arr.join()
					this.dataAll.sku.forEach(item => {
						// 如果后台返回规格与前端规格一致，赋值换算
						if (item.difference == text) {
							this.price = item.price //价格赋值
							this.market_price = item.market_price //划线价格赋值
							this.stock = item.stock //库存
							this.sku_id = item.id
						}
					})
					// 计算是否选择规格
					let num = 0
					arr.forEach(item => {
						if (item != "") {
							num = num + 1
						}
					})
					if (num != arr.length) {
						this.guigeflag = false
					} else {
						this.guigeflag = true
					}
				},
				deep: true
			}
		},
		methods: {
			onShareAppMessage() {
				return {
					title: this.dataAll.title,
					path: "pages/shopping/shangpinxq?id=" + this.listid + "&invite_code=" + uni.getStorageSync(
						"invite_code"),
				}
			},
			previewimg(index, arr) {
				let i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			// 收藏
			collect() {
				httpRequest.request('/api/goods/addGoodsCollect', 'GET', {
					id: this.listid,
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.dataAll.is_collect = !this.dataAll.is_collect
					}
				})
			},
			getdetail() {
				httpRequest.request('/api/goods/goodsDetail', 'GET', {
					goods_id: this.listid
				}, false, false, true).then(res => {
					this.pageshow = true
					if (res.code == 1) {
						res.data.spu.forEach(current => {
							current.item = current.item.split(",")
							this.$set(current, "selecttext", "")
						})
						let arr = res.data.images_text
						this.banner = arr
						console.log(this.banner)
						if (res.data.other_sx != "") {
							res.data.other_sx = JSON.parse(res.data.other_sx)
						}
						res.data.video_url_text = res.data.video_url_text ? [res.data.video_url_text] : []
						this.dataAll = res.data
						if(this.dataAll.specs=='single'){
							this.price=this.dataAll.goodsprice.price
							this.market_price=this.dataAll.goodsprice.market_price
							this.stock=this.dataAll.goodsprice.stock
						}
					}
				})
			},
			getset() {
				httpRequest.request('/api/index/getConfigInfo', 'GET', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.xdinfo = res.data.oods_addorder_des
						this.mobile = res.data.kf_mobile
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			shopping_cart() {
				uni.navigateTo({
					url: '/pages/shopping/gouwuche'
				})
			},
			changetab(item) {
				this.current = item.index
			},
			phone() {
				let p = ""
				if (this.dataAll.mobile) {
					p = this.dataAll.mobile
				} else {
					p = this.dataAll.category.mobile
				}
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {

				})
			},
			phones(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {

				})
			},
			// 规格选择
			checkgg(item, ite) {
				item.selecttext = ite
			},
			// 数量减
			reducenum() {
				if (this.buynumber == 1) {
					httpRequest.toast("不能再减了哦！")
					return
				}
				this.buynumber = Number(this.buynumber) - 1
			},
			//数量加
			addnum() {
				this.buynumber = Number(this.buynumber) + 1
			},
			buytype(value) {
				this.buy_type = value
				this.ggshow = true
			},
			lookallpl(id) {
				uni.navigateTo({
					url: "/pages/shopping/shangpinpl?id=" + id
				})
			},
			jumpqy() {
				uni.navigateTo({
					url: "/pages/index/zhuye?id=" + id
				})
			},
			ggclose() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				if (this.buynumber <= 0 || this.buynumber == "") {
					httpRequest.toast("购买数量有误")
					return false
				}
				if (this.dataAll.plat_status == "hidden") {
					httpRequest.toast("当前商品正处于审核中，暂时无法购买")
					return
				}
				if (this.dataAll.status == "hidden") {
					httpRequest.toast("当前商品已下架，暂时无法购买")
					return
				}
				if (!this.guigeflag) {
					httpRequest.toast("请先选择规格")
					return
				}
				this.ggshow = false
				if (this.buy_type == 0) {
					this.addcar()
				} else {
					let data = {
						type: "detail", //detail=商品详情,cart=购物车
						data: [{
							goods_id: this.listid,
							number: this.buynumber,
							sku_id: this.dataAll.specs == "single" ? this.dataAll.goodsprice.id : this.sku_id
						}]
					}
					uni.navigateTo({
						url: '/pages/shopping/querendd?msg=' + encodeURIComponent(JSON.stringify(data))
					})
				}
			},
			addcar() {
				httpRequest.request('/api/cart/addCart', 'POST', {
					shop_id: this.dataAll.shop_id,
					goods_id: this.dataAll.id,
					number: this.buynumber,
					sku_id: this.dataAll.specs == "single" ? this.dataAll.goodsprice.id : this.sku_id
				}).then(res => {
					httpRequest.toast(res.msg)
				})
			},
			closed() {
				this.ggshow = false
			},
			changetype() {
				this.type = this.type == 0 ? 1 : 0
			},
		}
	}
</script>

<style lang="scss" scoped>
	.footer_stars {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
	}
	.share_zi {
		margin-top: 13rpx;
	}
	.centertop {
		position: absolute;
		bottom: 360rpx;
		left: 24rpx;
		width: 300rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 42rpx 42rpx 42rpx 42rpx;

		.HCA {
			width: 150rpx;
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #228DFF;
			padding: 8rpx 20rpx 8rpx 30rpx;
			background: #FFFFFF;
			text-align: center;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			// position: relative;
			// left: 15rpx;
			box-sizing: border-box;
		}

		.viddeo {
			width: 150rpx;
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
			text-align: center;
			padding: 8rpx 20rpx 8rpx 30rpx;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			box-sizing: border-box;
		}
	}

	.qianshu {
		font-size: 48rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #228DFF;
	}

	.huisetextjx {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.margin_right3{
		margin-right: 30rpx;
	}

	.zhx {
		text-decoration: line-through;
	}

	.huisetext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.lookall {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
	}

	.xiahuax {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, .01);
	}

	.pjslt {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.wujiaox {
		background-image: url('@/static/images/xiangqing_slices/collect_star.png');
		width: 27rpx;
		height: 27rpx;
		background-size: 100% 100%;
	}

	.ershui {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.mjplt {
		width: 140rpx;
		height: 140rpx;
		border-radius: 18rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 18rpx;
		}
	}

	.margin_right1 {
		margin-right: 10rpx;
	}

	.margin_right2 {
		margin-right: 20rpx;
	}

	.margin_top1 {
		margin-top: 10rpx;
	}

	.nostrongtext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
	}

	.section {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 30rpx 30rpx;
	}

	.addcar {
		width: 200rpx;
		text-align: center;
		padding: 15rpx 0;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		border: 2rpx solid #228DFF;
		color: #228DFF;
	}

	.buy {
		width: 200rpx;
		padding: 17rpx 0;
		text-align: center;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		background-color: #228DFF;
		color: #fff;
	}

	.bottomimage {
		padding: 15rpx 0;
		width: 45rpx;
		height: 45rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.guigslt {
		width: 134rpx;
		height: 134rpx;
		border-radius: 8rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}

	.dahtext {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
	}

	.erslhuang {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #228DFF;
	}

	.huangg {
		// width: 147rpx;
		padding: 10rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		background: rgba(34, 141, 255, .1);
		border-radius: 27rpx;
	}

	.huigg {
		padding: 10rpx 30rpx;
		// width: 147rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		background: #F5F5F5;
		border-radius: 27rpx;
	}

	.jiajian {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 400rpx;
		height: 60rpx;
		position: relative;
		border-radius: 20rpx;
		background-size: 100% 100%;
		background-image: url('@/static/images/system/jiajian.png');
	}

	.jiahao {
		background-size: 100% 100%;
		width: 21rpx;
		height: 19rpx;
		position: absolute;
		top: 22rpx;
		right: 46rpx;
		background-image: url('../../static/images/details/jiaohao.png');
	}

	.xhtext {
		width: 50%;
		font-size: 31rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #228DFF;
		text-align: center;
		margin-left: 78rpx;
		overflow-x: hidden;
	}

	.jianhao {
		width: 22rpx;
		position: absolute;
		left: 46rpx;
		top: 30rpx;

		.line {
			height: 3.5rpx;
			width: 22rpx;
			background-color: #999999;
		}
	}

	.popbgc {
		background-color: #fafafa;
	}

	.itembtn {
		border-bottom: 1rpx solid rgba(153, 153, 153, .1);
		// font-weight: bold;
	}

	.wiexin {
		width: 70.8rpx;
		height: 68.8rpx;
		background-size: 100% 100%;
	}

	.header_left {
		padding-left: 40rpx;
	}

	.yue {
		font-size: 20rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: RGBA(52, 113, 177, 1);
		z-index: 1;
	}

	.section_center {
		padding: 32rpx 70rpx 30rpx 30rpx;
	}

	.relation {
		padding: 33rpx 40rpx;
		margin-top: 30rpx;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
	}

	.wiexin_fuwu {
		margin-left: 20rpx;
	}

	.wiexin_kefu {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		display: flex;
		padding-left: 20rpx;
	}

	.logistics_zi {
		margin-top: 5rpx;
	}

	.look_details {
		border-radius: 51rpx 51rpx;
		padding: 20rpx 0rpx;
		margin: 75rpx 40rpx 0rpx 40rpx;
	}

	.logistics {
		text-align: center;
		padding: 30rpx 30rpx 60rpx 30rpx;
		background-color: #fafafa;
	}

	.logistics_danhao {
		padding: 0rpx 80rpx;
		font-size: 40rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}
</style>